<template>
    <div class="wrapper">
        <title-decorate titleName="水量统计"/>
        <div class="dash-board" id="poorPercentage1">
			<!--<el-progress
				:width="85"
				type="dashboard"
				:stroke-width="10"
				stroke-linecap="square"
				:percentage="percentage1"
				:color="colors"
			></el-progress>
			<el-progress
				:width="85"
				type="dashboard"
				:stroke-width="10"
				stroke-linecap="square"
				:percentage="percentage2"
				:color="colors"
			></el-progress>-->
        </div>
        <div class="my-chart" id="productionPoorChart"></div>
    </div>
</template>

<script>
import TitleDecorate from "../../components/TitleDecorate.vue";
import * as echarts from "echarts";
import {BigScreen} from "../../datastore/BigScreen";
export default {
    components: {TitleDecorate},
    props: {},
    data() {
        return {
            percentage1: 10,
            percentage2: 90,
			x_data:[],
			y_data:[],
            colors: [
                {color: "#f56c6c", percentage: 20},
                {color: "#e6a23c", percentage: 40},
                {color: "#5cb87a", percentage: 60},
                {color: "#1989fa", percentage: 80},
                {color: "#6f7ad3", percentage: 100},
            ],
        };
    },
    watch: {},
    computed: {},
    methods: {
        /**
         * 通过js给仪表盘添加文字描述
         */
        setPercentage() {
            var that = this;
            let domEle = document
                .getElementById("poorPercentage1")
                .getElementsByClassName("el-progress__text");
            let testDes = ["未计费", "已计费"];
            if (domEle && domEle.length) {
                for (let i = 0; i < domEle.length; i++) {
                    let text = i == 0 ? that.percentage1 : that.percentage2;
                    domEle[i].innerHTML = `${text}<div class='poor-percentage-des'>${testDes[i]}</div>`;
                }
            }
        },
        drawCharts() {
			var that = this;
            var chartDom = document.getElementById("productionPoorChart");
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["水量统计"],
                    itemHeight: 5,
                    itemWidth: 26,
                    show: "true",
                    align: "right",
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 11,
                    },
                    right: 20,
                    top: 0,
                },
                grid: {
                    top: 32,
                    bottom: 20,
                    right: 20,
                    left: 45,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: that.x_data,
                    axisLabel: {
                        color: "#ffffff",
                        fontSize: 11,
                    },
                },
                yAxis: {
                    name: "单位：%",
                    nameLocation: "end",
                    nameTextStyle: {
                        color: "#ffffff",
                        fontSize: 11,
                    },
                    axisLabel: {
                        color: "#ffffff",
                        fontSize: 11,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#ffffff1a",
                        },
                    },
                },
                series: [
                    {
                        name: "水量统计",
                        data: that.y_data,
                        color: "rgba(0, 170, 255, 0.8)",
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgba(1, 166, 210,0.8)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(91, 143, 249, 0.1)",
                                },
                            ]),
                        },
                        type: "line",
                        symbolSize: 2,
                        smooth: true,
                    },
                ],
            };

            option && myChart.setOption(option);
        },
    },
    created() {
    },
    mounted() {
        var that = this;
		// this.setPercentage();
		// this.drawCharts();
        // new BigScreen(this).getNrwTotal({},(res)=>{
        //     that.percentage1 = res.datas.order_water_total;
        //     that.percentage2 = res.datas.order_yes_water_total;
        //     this.setPercentage();
        // })
		new BigScreen(this).getNrwTotalMonth({},(res)=>{
			that.x_data = res.datas.x_news;
			that.y_data = res.datas.y_news;
			this.drawCharts();
		})
    },
};
</script>
<style lang="scss" scoped>
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .dash-board {
        width: 100%;
        flex: 2;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 5px 15px;
        box-sizing: border-box;

        /deep/ .el-progress__text {
            color: #ffffff;
            font-weight: bold;
            font-size: 18px !important;
        }

        /deep/ .poor-percentage-des {
            margin-top: 5px;
            font-weight: normal;
            font-size: 8px !important;
            transform: scale(0.8);
        }

        .el-progress /deep/ path:first-child {
            stroke: #0f2c45;
        }
    }

    .my-chart {
        width: 100%;
        flex: 3;
        margin-top: 10px;
    }
}
</style>
